/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-06-29 14:09:47
 * @LastEditors: cuidm
 * @LastEditTime: 2022-08-25 13:13:19
 */
import React, { useEffect, useState } from "react";
import { Affix, Button, Alert, Radio, Select, Input, Space, Row, Col, Table, Empty,message } from "antd";
import request, { exportFile } from "@/utils/request";
import { CmdbContent, CmdbHeader, isAuthorized, BusinessBtn } from "@/components";
import cmdbres from "@/data/cmdbres";
import hcpUtils from "@/utils/hcpUtils";
import CategoryItem from './categoryItem';
import CreateCategory from './create';
import "./index.less";

const {filterArray} = hcpUtils;
const ServiceCategory = ({ history, match, location }) => {
    const [biz, setBiz] = useState();
    const [searchValue, setSearchValue] = useState('');
    const [loading, setLoading] = useState(false);
    const [tableData, setTableData] = useState([]);
    const [showCreateModal, setShowCreateModal] = useState(false);
    
    const getTableData = async () => {
        try {
            if(!(biz && biz.cm_unid)) {
                message.warning("请确认是否创建业务！");
                return;
            }
            setLoading(true);
            const res = await request({
                ...cmdbres.queryServiceCategory,
                params: {
                    bizId: biz.cm_unid,
                },
            });
            setLoading(false);
            if (res && res.data && res.data.info) {
                const arr = filterArray(res.data.info);
                setTableData(arr);
            } else {
                setTableData([]);
            }
        } catch (error) {
            console.log(error);
        } 
    };

    useEffect(() => {
        if(biz) {
            getTableData();
        }
    }, [biz]);
   
    return (
        <CmdbContent>
            <CmdbHeader title={'服务分类'} />
            <section className="hcp__page">
                <section className="hcp__page__container">
                    <div className="affix-header" style={{backgroundColor: 'white', padding: 10, marginBottom: 10}}>
                        <div style={{marginBottom: 10}}>
                            <BusinessBtn setBiz={setBiz} history={history}/>
                        </div>
                        <Alert style={{marginBottom: 10}}
                            message="服务分类可以帮助业务梳理服务用途。配置平台初始化包含一些常见的分类，并支持根据业务拓展更多分类。"
                            type="info"
                            closable
                        />
                        <Row style={{marginBottom: 10}}>
                        <Col span={8}>
                            <Space>
                                <Button 
                                    className="hcp_toolbar_btn" 
                                    type="primary"
                                    onClick={() => { setShowCreateModal(true); }}>
                                        新建
                                </Button>
                                <Button type="primary" onClick={() => {getTableData()}} >
                                    刷新
                                </Button>
                            </Space>
                        </Col>
                        {/* <Col span={16} style={{ textAlign: "right" }}>
                            <Space>
                                <Input.Search
                                    placeholder="请输入关键字"
                                    value={searchValue}
                                    onChange={(e) => {
                                        setSearchValue(e.target.value);
                                    }}
                                    onSearch={getTableData}
                                    style={{ width: "210px" }}
                                    enterButton
                                />
                            </Space>
                        </Col> */}
                        </Row>
                    </div>
                    <Row gutter={[20, 20]} style={{width: '100%'}}>
                    {
                        tableData && tableData.length ? tableData.map((item, index) => (
                            <Col span={6} key={index}>
                                <CategoryItem
                                    info={item}
                                    categoryId={item.id}
                                    onFinish={getTableData}
                                />
                            </Col>
                        ))
                        : <div style={{textAlign: 'center', width: '100%', padding: '50px 0'}}><Empty/></div>
                    }
                    </Row>
                </section>
            </section>
            <CreateCategory
                visible={showCreateModal}
                setVisible={setShowCreateModal}
                biz={biz}
                onCreateFinish={getTableData}
            />
        </CmdbContent>
    );
};

export default ServiceCategory;
